<template>
  <el-dialog :visible.sync="open" width="1200px" height="600px" append-to-body>
    <div class="app-container">
      <div id="line-chart" class="chart-container"></div>
    </div>
  </el-dialog>
</template>

<script>
import { listCount } from "@/api/merchant/pushInfo";
import * as echarts from "echarts";
import { debounce } from "../../../../utils/lib";

export default {
  name: "Count",
  data() {
    return {
      open: false,
      lineChart: null, // 用于存储echarts实例
      queryParams: undefined,
    };
  },
  created() {},
  mounted(){
    this.resizeHandler = debounce(() => {
      if (this.lineChart) {
        this.lineChart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.resizeHandler)
  },
  unmounted() {
    window.removeEventListener('resize', this.resizeHandler)
  },
  methods: {
    show(queryParams) {
      this.open = true;
      this.queryParams = queryParams;
      this.$nextTick(() => {
        this.loadLineChart(queryParams);
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    // 加载折线图
    loadLineChart(queryParams) {
      // 获取折线图容器
      const chartContainer = document.getElementById("line-chart");
      this.lineChart = echarts.init(chartContainer);

      // 调用接口获取折线图数据
      listCount(queryParams).then((response) => {
        console.log(queryParams);
        // 解析接口返回的数据
        const data = response.data.dataList;

        // 配置折线图
        const option = {
          title: {
            top: 20,
            left: "center",
            text: `推送折线图`,
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["推送数量"],
          },
          xAxis: {
            name: "时间",
            type: "category",
            data: data.map((item) => item.Hour.split(":").filter((_, index) => index < 2).join(":")),
          },
          yAxis: {
            type: "value",
          },
          dataZoom: [
            {
              type: "inside",
              start: 80,
              end: 100,
            },
            {
              start: 80,
              end: 100,
            },
          ],
          toolbox: {
            feature: {
              myFull: {
                // 全屏
                show: true,
                title: "全屏",
                icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
                onclick: (e) => {
                  // 全屏查看
                  if (chartContainer.requestFullScreen) {
                    // HTML W3C 提议
                    chartContainer.requestFullScreen();
                  } else if (chartContainer.msRequestFullscreen) {
                    // IE11
                    chartContainer.msRequestFullScreen();
                  } else if (chartContainer.webkitRequestFullScreen) {
                    // Webkit
                    chartContainer.webkitRequestFullScreen();
                  } else if (chartContainer.mozRequestFullScreen) {
                    // Firefox
                    chartContainer.mozRequestFullScreen();
                  }
                  // 退出全屏
                  if (chartContainer.requestFullScreen) {
                    document.exitFullscreen();
                  } else if (chartContainer.msRequestFullScreen) {
                    document.msExitFullscreen();
                  } else if (chartContainer.webkitRequestFullScreen) {
                    document.webkitCancelFullScreen();
                  } else if (chartContainer.mozRequestFullScreen) {
                    document.mozCancelFullScreen();
                  }
                  setTimeout(() => {
                    this.lineChart.resize()
                  }, 100)
                },
              },
            },
          },
          series: [
            {
              name: "数量",
              type: "line",
              smooth: true,
              data: data.map((item) => item.Count),
              label: {
                show: true,
                position: "top", // 标签显示在数据点上方
                formatter: "{c}", // 使用默认格式化函数，显示数值
              },
            },
          ],
        };

        // 使用配置渲染折线图
        this.lineChart.setOption(option);
      });
    },
  },
};
</script>

<style scoped>
.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 140px);
  width: 100%;
  padding: 0;
}

.chart-container {
  height: 100%;
  width: 100%;
  background-color: #fff;
}
</style>
